<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>文创产品售卖窗口</title>
    <link rel="stylesheet" href="css/bootstrap.min.css">
    <script src="js/jquery-1.11.0.js"></script>
    <script src="js/bootstrap.min.js"></script>
    <link rel="stylesheet" type="text/css" href="css/products.css" />

</head>

<body>
    <header>
        <div><img src="images/tou01.jpg" alt=""></div>
        <h3>红心闪闪 --文创产品售卖窗口</h3>
        <p>回头率 20% &nbsp;&nbsp;&nbsp;&nbsp;关注数 200 &nbsp;&nbsp;&nbsp;&nbsp;所在地 杭州</p>
    </header>

    <div class="container">
        <div class="row">
            <div class="col-xs-12 title">
                <div class="input-group">
                    <input type="text" class="form-control" placeholder="搜索商品">
                    <span class="input-group-btn">
						<button class="btn btn-default searchbtn" type="button">
                            <span class="glyphicon glyphicon-search"></span>
                    </button>
                    </span>
                </div>
            </div>
            <!-- <div class="col-*-*"></div>       -->
        </div>
        <div class="row">
            <div class="col-xs-12 mynav">
                <ul class="nav nav-pills mynavul ">
                    <li><a href="# " class="text-warning">首页</a></li>
                    <li><a href="# " class="text-warning">全部</a></li>
                    <li class="active "><a href="# " style="background-color: #e6355b;">新品</a></li>
                    <li><a href="# " class="text-warning">活动</a></li>
                </ul>
            </div>
        </div>

        <div class="row">
            <div class="col-xs-12 mybanner">
                <div id="myCarousel" class="carousel slide">
                    <!-- 轮播（Carousel）指标 -->
                    <ol class="carousel-indicators">
                        <li data-target="#myCarousel" data-slide-to="0" class="active"></li>
                        <li data-target="#myCarousel" data-slide-to="1"></li>
                        <li data-target="#myCarousel" data-slide-to="2"></li>
                    </ol>
                    <!-- 轮播（Carousel）项目 -->
                    <div class="carousel-inner">
                        <div class="item active">
                            <img src="images/banner03" alt="First slide" style="width: 345px;height: 230px;">
                        </div>
                        <div class="item">
                            <img src="images/banner01.jpeg" alt="Second slide" style="width: 345px;height: 230px;">
                        </div>
                        <div class="item">
                            <img src="images/banner02.jpeg" alt="Third slide" style="width: 345px;height: 230px;">
                        </div>
                    </div>
                    <!-- 轮播（Carousel）导航 -->
                    <a class="left carousel-control" href="#myCarousel" role="button" data-slide="prev">
                        <span class="glyphicon glyphicon-chevron-left" aria-hidden="true"></span>
                        <span class="sr-only">Previous</span>
                    </a>
                    <a class="right carousel-control" href="#myCarousel" role="button" data-slide="next">
                        <span class="glyphicon glyphicon-chevron-right" aria-hidden="true"></span>
                        <span class="sr-only">Next</span>
                    </a>
                </div>
            </div>
        </div>

        <div class="row">
            <div class="col-xs-3 myweipic">
                <a href="#" class="thumbnail">
                    <img src="images/wei01.jpeg" alt="通用的占位符缩略图" style="width: 55px;height: 55px;">
                </a>
                <p>匠人工艺</p>
            </div>
            <div class="col-xs-3 myweipic">
                <a href="#" class="thumbnail">
                    <img src="images/wei02" alt="通用的占位符缩略图" style="width: 55px;height: 55px;">
                </a>
                <p>年节礼品</p>
            </div>
            <div class="col-xs-3 myweipic">
                <a href="#" class="thumbnail">
                    <img src="images/wei03.jpeg" alt="通用的占位符缩略图" style="width: 55px;height: 55px;">
                </a>
                <p>联名产品</p>
            </div>
            <div class="col-xs-3 myweipic">
                <a href="#" class="thumbnail">
                    <img src="images/wei04" alt="通用的占位符缩略图" style="width: 55px;height: 55px;">
                </a>
                <p>文创单品</p>
            </div>
        </div>

        <div class="row">
            <div class="col-xs-12 mybgipic"></div>
        </div>

        <div class="row">
            <div class="col-xs-12 mytitle">
                <p>文创单品</p>
            </div>
        </div>

        <div class="row">
            <div class="col-xs-6 mypro">
                <div class="thumbnail">
                    <img src="images/pro01.jpg" alt="通用的占位符缩略图" style="width: 167.5px; height: 167.5px;">
                    <div class="caption">
                        <p><b>红色文化永传承 经典红色抱枕</b></p>
                        <h4>￥98.00</h4>
                        <p class="salen">销量254 </p>
                        <span class="glyphicon glyphicon-shopping-cart mycar" style="color: rgb(202, 94, 17);"></span>
                    </div>
                </div>
            </div>
            <div class="col-xs-6 mypro">
                <div class="thumbnail">
                    <img src="images/pro03.jpeg" alt="通用的占位符缩略图" style="width: 167.5px; height: 167.5px;">
                    <div class="caption">
                        <p><b>精品创意纸袋 生活精简包装助手</b></p>
                        <h4>￥12.00</h4>
                        <p class="salen">销量102 </p>
                        <span class="glyphicon glyphicon-shopping-cart mycar" style="color: rgb(202, 94, 17);"></span>
                    </div>
                </div>
            </div>
            <div class="col-xs-6 mypro">
                <div class="thumbnail">
                    <img src="images/pro04.jpeg" alt="通用的占位符缩略图" style="width: 167.5px; height: 167.5px;">
                    <div class="caption">
                        <p><b>黑色皮革书写本 经典横纹版</b></p>
                        <h4>￥56.00</h4>
                        <p class="salen">销量159 </p>
                        <span class="glyphicon glyphicon-shopping-cart mycar" style="color: rgb(202, 94, 17);"></span>
                    </div>
                </div>
            </div>
            <div class="col-xs-6 mypro">
                <div class="thumbnail">
                    <img src="images/pro02.jpg" alt="通用的占位符缩略图">
                    <div class="caption">
                        <p><b>深邃蓝色香薰  生活居家首选</b></p>
                        <h4>￥142.00</h4>
                        <p class="salen">销量96 </p>
                        <span class="glyphicon glyphicon-shopping-cart mycar" style="color: rgb(202, 94, 17);"></span>
                    </div>
                </div>
            </div>
        </div>

    </div>

    <footer class="navbar-fixed-bottom">
        <div class="row">
            <div class="col-xs-3 myfooter">
                <a href="#">
                    <span class="glyphicon glyphicon-home myfoopic" style="color: rgba(240, 24, 4, 0.952);"></span>
                    <p style="color: rgba(240, 24, 4, 0.952);"> 首页</p>
                </a>
            </div>
            <div class="col-xs-3 myfooter">
                <a href="#">
                    <span class="glyphicon glyphicon-th myfoopic" style="color: rgb(104, 96, 102);"></span>
                    <p style="color: rgb(104, 96, 102);"> 分类</p>
                </a>
            </div>
            <div class="col-xs-3 myfooter">
                <a href="#">
                    <span class="glyphicon glyphicon-comment myfoopic" style="color: rgb(104, 96, 102);"></span>
                    <p style="color: rgb(104, 96, 102);"> 客服</p>
                </a>
            </div>
            <div class="col-xs-3 myfooter">
                <a href="#">
                    <span class="glyphicon glyphicon-heart-empty myfoopic" style="color: rgb(104, 96, 102);"></span>
                    <p style="color: rgb(104, 96, 102);"> 关注</p>
                </a>
            </div>
        </div>
    </footer>

</body>

</html>